import React, { memo, useEffect, useState, forwardRef } from 'react';
import { Modal, Form, Select, DatePicker, message, Spin } from 'antd';
import moment from 'moment';
import {
    queryDictList,
    onSaveRemindSetting
} from '@/services/salaryManage/salaryCalculate.js';
import { MONTHList } from '@/pages/SalaryManage/utils/staticList'
import styles from '../../index.less';

const { Option } = Select;
const DateSelect = memo(forwardRef(({ value, onChange }) => {
    const [val, setVal] = useState(null);
    const onValueChange = date => {
        onChange(date ? date.format('YYYY-MM-DD') : null);
    };
    useEffect(() => {
        setVal(value ? moment(value) : null)
    }, [value]);
    return <DatePicker value={val} onChange={onValueChange} format="MM-DD" />
}));

const RemindSettingEditModal = ({ visible = true, editData = {}, form, onCancel, onSuccess }) => {
    const { getFieldDecorator, validateFields, resetFields } = form;
    const [loading, setLoading] = useState(false);
    const title = editData.month ? MONTHList[editData.month - 1].monthName : '';
    const [warnList, setWarnList] = useState([]);
    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 }
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 }
        }
    };
    const getWarnList = async () => {
        try {
            const { code, data = {} } = await queryDictList('staffWarnModeOptions');
            if (code === 10000) {
                setWarnList(data.staffWarnModeOptions || []);
            }
        } catch (e) {
            console.log(e);
        }
    };
    const onSave = async values => {
        try {
            setLoading(true);
            const { code, msg } = await onSaveRemindSetting(
                {
                    ...editData,
                    ...values
                }
            );
            if (code === 10000) {
                message.success('编辑成功！');
                resetFields();
                onSuccess();
            } else {
                message.error(msg);
            }
            setLoading(false);
        } catch (e) {
            console.log(e);
            setLoading(false);
        }
    };
    useEffect(() => {
        getWarnList();
    }, []);
    return <Modal
        title={`${title}定时器与提醒编辑`}
        visible={visible}
        width={640}
        className={styles.formModal}
        destroyOnClose
        onCancel={() => {
            resetFields();
            onCancel()
        }}
        onOk={() => {
            validateFields((err, values) => {
                console.log(values);
                if (!err) {
                    console.log('Received values of form: ', values);
                    onSave(values);
                }
            });
        }}
        confirmLoading={loading}
    >
        <Spin spinning={loading}>
            <Form {...formItemLayout}>
                <Form.Item label="生成薪资时间">
                    {getFieldDecorator('generateDate', {
                        initialValue: editData.generateDate,
                        rules: [
                            {
                                required: true,
                                message: '请选择生成薪资时间'
                            }
                        ]
                    })(
                        <DateSelect/>
                    )}
                </Form.Item>
                <Form.Item label="考勤数据获取时间">
                    {getFieldDecorator('attendDate', {
                        initialValue: editData.attendDate,
                        rules: [
                            {
                                required: true,
                                message: '请选择考勤数据获取时间'
                            }
                        ]
                    })(
                        <DateSelect/>
                    )}
                </Form.Item>
                <Form.Item label="审批流获取时间">
                    {getFieldDecorator('workflowDate', {
                        initialValue: editData.workflowDate,
                        rules: [
                            {
                                required: true,
                                message: '请选择审批流获取时间'
                            }
                        ]
                    })(
                        <DateSelect/>
                    )}
                </Form.Item>
                <Form.Item label="无数据提醒时间">
                    {getFieldDecorator('warnDate', {
                        initialValue: editData.warnDate,
                        rules: [
                            {
                                required: true,
                                message: '请选择无数据提醒时间'
                            }
                        ]
                    })(
                        <DateSelect/>
                    )}
                </Form.Item>
                <Form.Item label="提醒方式">
                    {getFieldDecorator('warnType', {
                        initialValue: editData.warnType,
                        rules: [
                            {
                                required: true,
                                message: '请选择提醒方式'
                            }
                        ]
                    })(
                        <Select placeholder="请选择提醒方式">
                            {
                                warnList.map(item => <Option value={item.key} key={item.key}>{item.value}</Option>)
                            }
                        </Select>
                    )}
                </Form.Item>
            </Form>
        </Spin>
    </Modal>
};
export default memo(Form.create({ name: 'RemindSettingEditModal' })(RemindSettingEditModal))
